<!-- 采购到货及时率 -->
<template>
  <div class="app-container">
    <div class="search-and-button1" :class="{ showSearch: show }">
      <ImportFile
        url="/purchase/statistics/rate/import"
        @getTableInfo="getTableInfo"
      />
      <el-button
        type="primary"
        plain
        :icon="!show ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"
        @click="show = !show"
        >查询条件</el-button
      >
      <el-button type="primary" icon="el-icon-search" @click="getTableInfo()"
        >查询</el-button
      >

      <div style="float: right">
        <el-dropdown @command="handleCommand" menu-align="right">
          <el-button type="primary">
            图表
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="PublicTreeChart">
              <i class="el-icon-s-data"></i> 柱状图(竖)
            </el-dropdown-item>
            <el-dropdown-item command="PublicHorChart">
              <i class="el-icon-s-unfold"></i> 柱状图(横)
            </el-dropdown-item>
            <el-dropdown-item command="PublicLineChart">
              <i class="el-icon-s-marketing"></i> 折线图
            </el-dropdown-item>
            <el-dropdown-item command="PublicPieChart">
              <i class="el-icon-s-help"></i> 饼状图
            </el-dropdown-item>
            <el-dropdown-item command="table">
              <i class="el-icon-s-grid"></i>显示表格</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <transition name="el-zoom-in-top">
      <div v-show="show" class="more-search">
        <el-form :model="search" label-width="80px">
          <el-row>
            <el-col :xs="24" :xl="6" :md="12">
              <el-form-item label="物料" prop="keyword">
                <el-input
                  v-model="search.keyword"
                  placeholder="请输入名称或编码进行搜索"
                  clearable
                  @keyup.enter.native="getTableInfo()"
                  @clear="getTableInfo()"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :xl="6" :md="12">
              <el-form-item label="单号" prop="objNo">
                <el-input
                  v-model="search.objNo"
                  placeholder="请输入收货单号进行搜索"
                  clearable
                  @keyup.enter.native="getTableInfo()"
                  @clear="getTableInfo()"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :xl="6" :md="12">
              <el-form-item label="到货日期" prop="beginDate">
                <el-date-picker
                  v-model="search.planTime"
                  style="width: 100%"
                  type="daterange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期时间"
                  @change="getTableInfo()"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </transition>

    <template v-if="currentView === 'table'">
      <el-row class="table">
        <el-table
          v-loading="loading"
          :data="tableData"
          ref="tableData"
          stripe
          border
        >
          <el-table-column type="selection" align="center"></el-table-column>
          <el-table-column
            align="center"
            type="index"
            label="索引"
            width="60px"
          />
          <el-table-column
            v-for="item in fields"
            :key="item.id"
            :align="item.align || 'left'"
            :prop="item.code.split(':')[1]"
            :label="item.val"
            :min-width="item.width + 'px'"
            show-overflow-tooltip
          >
            <template #default="{ row }">
              <div
                v-if="
                  item.code.split(':')[1] === 'quantityRate' &&
                  row.quantityRate > 0
                "
                style="display: list-item"
              >
                <el-progress
                  :percentage="Math.abs(row.quantityRate)"
                  :stroke-width="16"
                  :color="customColors"
                  :text-inside="true"
                />
              </div>
              <div v-else-if="item.code.split(':')[1] === 'checked'">
                <i
                  v-if="row[item.code.split(':')[1]] == '1'"
                  class="el-icon-check"
                />
                <i v-else class="el-icon-close" />
              </div>
              <span v-else>{{ row[item.code.split(":")[1]] }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-row>

      <el-row>
        <div class="table-btn-box">
          <el-button
            @click="
              () => {
                tableData.forEach((row) => {
                  $refs['tableData'].toggleRowSelection(row, true);
                });
              }
            "
            >选择全部</el-button
          >
          <el-button
            @click="
              () => {
                tableData.forEach((row) => {
                  $refs['tableData'].toggleRowSelection(row);
                });
              }
            "
            >反向选择</el-button
          >
          <el-button>
            更多菜单
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
        </div>
        <pagination
          ref="Pagination"
          :total="total"
          :current.sync="search.current"
          :size.sync="search.size"
          @pagination="getTableInfo"
        />
      </el-row>
    </template>

    <el-row v-if="currentView !== 'table'">
      <!-- 动态加载组件 -->
      <div style="width: 100%; height: calc(100vh - 315px)">
        <component
          :is="currentView"
          ref="chartComponent"
          height="100%"
          width="100%"
          :table-data="chartData"
        />
      </div>
    </el-row>
  </div>
</template>
<script>
import ImportFile from "@/components/ImportFile";
import Pagination from "@/components/Pagination";
import PublicTreeChart from "@/components/Charts/PublicTreeChart";
import PublicLineChart from "@/components/Charts/PublicLineChart";
import PublicHorChart from "@/components/Charts/PublicHorChart";
import PublicPieChart from "@/components/Charts/PublicPieChart";

export default {
  components: {
    Pagination,
    ImportFile,
    PublicTreeChart,
    PublicLineChart,
    PublicHorChart,
    PublicPieChart,
  },
  props: {
    fields: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      currentView: "table", // 控制显示表格或图表
      loading: false,
      tableData: [],
      chartData: [],
      total: 0,
      search: {
        current: 1,
        size: 20,
        objNo: "",
        keyword: "",
        beginDate: "",
        endDate: "",
        planTime: [],
        treeStr: "-1",
      },
      show: false,
      customColors: [
        { color: "#f56c6c", percentage: 30 },
        { color: "#e6a23c", percentage: 60 },
        { color: "#1989fa", percentage: 80 },
        { color: "#2ed573", percentage: 100 },
      ],
    };
  },
  mounted() {
    this.getTableInfo();
  },

  methods: {
    handleCommand(command) {
      this.showView(command);
    },
    // 切换视图
    // 切换视图
    showView(view) {
      this.currentView = view;
    },
    getInfo(str) {
      this.search.treeStr = str;
      this.getTableInfo(1);
    },
    /**
     * @description: page
     * @param {*} page
     * @return {*}
     */
    async getTableInfo(page = 1) {
      this.search.current = page;
      const { planTime } = this.search;
      if (planTime && planTime.length) {
        this.search.beginDate = planTime[0];
        this.search.endDate = planTime[1];
      } else {
        this.search.beginDate = "";
        this.search.endDate = "";
      }
      const search = {
        ...this.search,
      };
      delete search.planTime;
      this.loading = true;
      const res = await this.$axios.post("/purchase/stat/qualified", search);
      if (res?.data.code === 200) {
        this.tableData = res.data.data.list;
        this.chartData = res.data.data.stat || [];
        this.total = res.data.data.total;
        setTimeout(() => {
          this.loading = false;
        }, 100);
      } else {
        this.loading = false;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  padding: 0px;
}
.search-and-button1 {
  min-height: 33px;
  line-height: 30px;
  height: 30px;
  overflow: hidden;
  transition: height 0.3s;
  width: 100%;
  text-align: left;
  .el-input {
    width: 350px;
    float: right;
  }
}
.table {
  margin-top: 10px;
}
</style>
